<style lang="css" module>
    .container {
        padding-top: 15px;
    }
    .loadding {
        text-align: center;
        font-size: 42px;
        padding-top: 100px;
    }
    .loaddingIcon {
        animation-name: "TurnAround";
        animation-duration: 1.4s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    .image {
        max-width:200px;
        margin-bottom: 10px;
    }
</style>

<template>
        <div :class="$style.container">
            <!-- 加载动画 -->
            <div v-show="loadding" :class="$style.loadding">
                <span class="glyphicon glyphicon-refresh" :class="$style.loaddingIcon"></span>
            </div>
            <div class="col-md-6 col-md-offset-3" v-show="!loadding">
                <div v-show="errorMessage" class="alert alert-danger alert-dismissible affix-top" role="alert">
                    <button type="button" class="close" @click.prevent="offAlert">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    {{ errorMessage }}
                </div>
                <div v-show="successMessage" class="alert alert-success alert-dismissible affix-top" role="alert">
                    <button type="button" class="close" @click.prevent="offAlert">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    {{ successMessage }}
                </div>
                <div class="form-group">
                    <label><span class="text-danger">*</span>名称：</label>
                    <input type="text" class="form-control" v-model="sensitive.name">
                </div>
                <div class="form-group">
                    <label><span class="text-danger">*</span>类型：</label>
                    <select class="form-control" v-model="sensitive.filter_word_category_id">
                       <option v-for="category in categories" :value="category.id">{{ category.name }}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label><span class="text-danger">*</span>分类：</label>
                   <select class="form-control" v-model="sensitive.filter_word_type_id">
                       <option v-for="type in types" :value="type.id">{{ type.name }}</option>
                   </select>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary" 
                    @click.prevent="updateSensitivue">确认</button>
                </div>
            </div>
        </div>
</template>

<script>
import request, { createRequestURI } from '../../util/request';
const UpdateSensitiveWord = {
    
    data: () => ({
        loadding: true,
        errorMessage: '',
        successMessage: '',
        categories: {},
        types: {},
        sensitive: {
          id: '',
          name: '',
          filter_word_category_id: '',
          filter_word_type_id: '',
        }
    }),

    methods: {

      getTypes () {
        return new Promise((resolve, reject) => {
            request.get(
              createRequestURI('filter-word-types'),
              { validateStatus: status => status === 200 }
            ).then(response => {
              this.loadding = false;
              this.types = response.data;
            }).catch(({ response: { data: { message: [ message ] = [] } = {} } = {} }) => {
              this.loadding = false;
              this.errorMessage = message;
            });
        });
      },

      getCategories () {
        request.get(
          createRequestURI('filter-word-categories'),
          { validateStatus: status => status === 200 }
        ).then(response => {
            console.log(response);
            this.loadding = false;
            this.categories = response.data;
        }).catch(({ response: { data = {} } = {} }) => {
            this.loadding = false;
        });
      },

      getSensitive () {
        request.get(
          createRequestURI(`sensitive-words/${this.sensitive.id}`),
          { validateStatus: status => status === 200 }
        ).then(response => {
            this.loadding = false;
            this.sensitive = response.data;
        }).catch(({ response: { data = {} } = {} }) => {
            this.loadding = false;
        });
      },

      updateSensitivue () {
        request.patch(
          createRequestURI(`sensitive-words/${this.sensitive.id}`),
          { ...this.sensitive },
          { validateStatus: status => status === 201 }
        ).then(({ data: { message: [ message ] = [] } }) => {
          this.successMessage = message;
        }).catch(({ response: { data = { } } = {} }) => {
          console.log(data);
          let {name = [], filter_word_category_id = [], filter_word_type_id = []} = data.errors;
          let [ errorMessage ] = [...name, ...filter_word_category_id, ...filter_word_type_id];
          this.errorMessage = errorMessage;
        });
      },

      offAlert () {
        this.errorMessage = this.successMessage = '';
      }

    },

    created () {

      this.sensitive.id = this.$route.params.id;
      this.getTypes();
      this.getCategories();
      this.getSensitive(this.sensitive.id);

    },

};
export default UpdateSensitiveWord;
</script>
